.container
  position fixed
  top 0px
  left 50%
  transform translateX(-50%)
  z-index 1000

.toast
  min-height 38px
  width 260px
  margin-top 10px
  display flex
  box-shadow rgba(0, 0, 0, 0.176) 0px 3px 8px
  border-radius 4px

.icon-wrapper
  text-align center
  padding-top 8px
  width 26px
  flex-shrink 0
  color white
  border-top-left-radius 4px
  border-bottom-left-radius 4px
  &.success
    background #37B47E
  &.error
    background #da4a4a
  &.info
    background #2684FF

.content
  flex 1
  padding 8px 12px
  border-top-right-radius 4px
  border-bottom-right-radius 4px
  &.success
    background #E3FCEF
    color #006644
  &.error
    color #ad0101
    background #efb7b7
  &.info
    color #2684FF
    background white

:global(.toast-animation-enter)
  transform translate3D(0, -120%, 0)

:global(.toast-animation-enter):global(.toast-animation-enter-active)
  transform translate3D(0, 0, 0)
  transition transform 100ms cubic-bezier(0.2, 0, 0, 1)


:global(.toast-animation-exit)
  transform scale(0.66)
  opacity 0
  transition transform 100ms cubic-bezier(0.2, 0, 0, 1), opacity 220ms ease 0s

:global(.toast-animation-exit):global(.toast-animation-exit-active)
  transform scale(0.66)
  opacity 0
